<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            background-color: #f1f1f1;
        }
        .left {
            float: left;
        }
        .bfc {
            overflow: hidden; /* 触发元素 BFC */
        }
    </style>
</head>
<body>
    <!-- 给容器加了bfc后, 里面的元素不会跑出去(独立的渲染区域, 内部元素的渲染不会影响边界以外的元素) -->
    <div class="container bfc">
        <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
        <p class="bfc">某一段文字……</p>
        <!-- bfc 区域不会与浮动元素 img 发生重叠 -->
    </div>
    <div>test</div>

    <!-- 
        TODO: BFC 块级格式化上下文
            一块独立的渲染区域, 内部元素的渲染不会影响边界以外的元素
        TODO: 形成BFC的常见条件
            float 不是 none
            position 是 absolute 或 fixed
            overflow 不是 visible
            display 是 flex 或 inline-block 或 table-cell 等
        TODO: 常见应用
            1.防止 margin 重叠
            同一个BFC内的两个两个相邻 Box 的 margin 会发生重叠, 因此我们可以在 div 外面再嵌套一层容器, 并且触发该容器生成一个 BFC, 这样 <div class="a"></div> 就会属于两个 BFC, 自然也就不会再发生 margin 重叠
                <div class="container">
                    <div class="a"></div>
                </div>    
                <div class="a"></div>

            2.清除内部浮动
            内部元素浮动后, container 的高度没有被撑开,, 如果希望 container 的高度能够包含浮动元素, 那么可以创建一个新的 BFC, 因为根据 BFC 的规则, 计算 BFC 的高度时, 浮动元素也参与计算

            3.自适应多栏布局
            根据规则, BFC的区域不会与float box重叠, 因此, 可以触发生成一个新的BFC, 如上述代码所示

        TODO: 清除浮动的方法
        1. 在 <div class='outer'> 内创建一个空元素, 对其设置 clear: both; 的样式
        2. .outer:after{
                content: '';
                display: table;
                clear: both;
            }
        3. BFC
    -->
</body>
</html>